<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view style="padding-bottom: 150rpx;">
		<!-- 照片 -->
<!-- 		<view class="photo">
			<cut-picture v-model='resident.picture' />
			<view style="color: #007AFF;font-size: 28rpx;margin-bottom: 40rpx;">请上传该用户正面照片</view>
		</view>
 -->
		<!-- <view class="true"></view> -->
		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="resident" ref="form" validateTrigger="bind" class="word5">

			<uni-forms-item required label="姓名" name="name">
				<input maxlength="50" placeholder="请输入姓名" v-model='resident.name' @input="binddata('name',$event.detail.value)">
			</uni-forms-item>
			<!-- <uni-forms-item required label="车牌号" name="carPlate">
				<input maxlength="50" placeholder="请输入车牌号" v-model='resident.carPlate' @input="binddata('carPlate',$event.detail.value)">
			</uni-forms-item>
			<uni-forms-item required label="车位号" name="carNo">
				<input maxlength="50" placeholder="请输入车位号" @input="binddata('carNo',$event.detail.value)" v-model='resident.carNo'>
			</uni-forms-item> -->
			<uni-forms-item required label="身份证号" name="personId">
				<input maxlength="18" placeholder="请输入身份证号" @input="binddata('personId',$event.detail.value)" v-model='resident.personId'>
			</uni-forms-item>
			<uni-forms-item required label="是否党员" name="politicalStatus">
				<radio-button-group placeholder="请选择是否党员" @input="binddata('politicalStatus',$event)" v-model="resident.politicalStatus" :items="types.politicalStatus"></radio-button-group>
			</uni-forms-item>
			<uni-forms-item required label="小区" name="projId">
				<single-picker placeholder="请选择小区" @input="binddata('projId',$event);onProjectChange($event)" v-model="resident.projId"
				 :list="projectList"></single-picker>
			</uni-forms-item>
			<uni-forms-item required label="房屋" name="roomIds">
				<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
			</uni-forms-item>
			<uni-forms-item required label="住户类型" name="residentType">
				<single-picker placeholder="请选择住户类型" @input="binddata('residentType',$event)" v-model="resident.residentType" :list="types.residentTypeList"></single-picker>
			</uni-forms-item>
			<uni-forms-item required label="居住类型" name="occupancyType">
				<single-picker placeholder="请选择居住类型" @input="binddata('occupancyType',$event)" v-model="resident.occupancyType"
				 :list="types.occupancyTypeList"></single-picker>
			</uni-forms-item>
			<uni-forms-item required label="入住状态" name="occupancyState">
				<single-picker placeholder="请选择入住状态" @input="binddata('occupancyState',$event)" v-model="resident.occupancyState"
				 :list="types.occupancyStateList"></single-picker>
			</uni-forms-item>
			<uni-forms-item required label="是否养宠物" name="pets">
				<radio-button-group placeholder="请选择是否养宠物" @input="binddata('pets',$event)" v-model="resident.pets" :items="types.pets"></radio-button-group>
			</uni-forms-item>
			<uni-forms-item required label="宠物类型" name="petType" v-show="resident.pets ==2 ">
				<my-checkbox-group placeholder="请选择宠物类型" @input="binddata('petType',$event)" v-model="resident.petType" :items="types.petTypeList"></my-checkbox-group>
			</uni-forms-item>

			<uni-forms-item required label="宠物照片" name="petUrl" v-show="resident.pets ==2 ">
				<imageUploader @input="binddata('petUrl',$event)" v-model="resident.petUrl" :max="1" />
			</uni-forms-item>
			<button class="btn" :disabled="isDisabled" @click="submitForm">确认</button>
		</uni-forms>


		<!-- 遮罩层 -->
	<!-- 	<view class="dialog" v-show="visible"></view>
		<view class="toast" v-show="visible">
			<scroll-view scroll-y="true" class="scroll">
				<view class="title">隐私保护及免责声明</view>
				<view class="scroll-item">
					本应用尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外,在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。本应用会不时更新本隐私权政策。
				</view>
				<view class="scroll-item">
					为了遵守国家法律法规及监管规定(例如:进行实名制管理、安全管理)，也为了向您提供服务及提升服务质量,我们需要收集、存储、使用及对外提供您的信息。您同意我们按照本政策约定处理您的信息,以便您享受优质、便捷、个性化的服务。
				</view>
				<view class="scroll-item-title">一、适用范围</view>
				<view class="scroll-item none">1、在您注册本应用帐号时，您需要根据本应用要求提供基本身份信息完成注册,需提供的信息包括但不限于:姓名、国籍、性别、职业、住址、联系方式、电子邮箱、有效身份证件、面部特征等个人信息。</view>
				<view class="scroll-item none">3、本应用通过合法途径从商业伙伴处取得的用户个人数据。</view>
				<view class="scroll-item-title">二、信息使用</view>
				<view class="scroll-item none">1、本应用不会向任何无关第三方提供、出售、出租、分享或交易您的个人信息，除非事先得到您的许可，或该第三方和本应用(含本应用关联公司)单独或共同为您提供服务，且在该服务结束后，其将被禁止访问包括其以前能够访问的所有这些资料。</view>
				<view class="scroll-item none">2、本应用亦不允许任何第三方以任何手段收集、编辑、出售或者无偿传播您的个人信息。任何本应用平台用户如从事上述活动，一经发现，本应用有权立即终止与该用户的服务协议。</view>
				<view class="scroll-item none">3、为服务用户的目的，本应用可能通过使用您的个人信息，向您提供您感兴趣的信息，包括但不限于向您发出产品和服务信息,或者与本应用合作伙伴共享信息以便他们向您发送有关其产品和服务的信息</view>
				<view class="scroll-item-title">三、信息披露</view>
				<view class="scroll-item">在如下情况下，本应用将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息∶</view>
				<view class="scroll-item none">1、经您事先同意,向第三方披露;</view>
				<view class="scroll-item none">2、为提供您所要求的产品和服务，而必须和第三方分享您的个人信息;</view>
				<view class="scroll-item none">3、根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露;</view>
				<view class="scroll-item none">4、如您出现违反中国有关法律、法规或者本应用服务协议或相关规则的情况，需要向第三方披露;</view>
				<view class="scroll-item none">5、如您是适格的知识产权投诉人并已提起投诉,应被投诉人要求，向被投诉人披露，以便双方处理可能的权利纠纷;</view>
				<view class="scroll-item none">6、其它本应用根据法律、法规或者网站政策认为合适的披露。</view>
				<view class="scroll-item-title">四、信息安全与免责条款</view>
				<view class="scroll-item">本应用帐号均有安全保护功能，请妥善保管您的用户名及密码信息。本应用将通过对用户密码进行加密等安全措施确保您的信息不丢失，不被滥用和变造。本应用将遵守行业通用标准来保护用户的私人信息。尽管有前述安全措施，但同时也请您注意在信息网络上不存在"完善的安全措施”。因此，本应用会尽力使用商业上可接受的方式来保护用户的个人信息，但不对用户信息的安全作任何担保。同时如因用户提供的个人资料不实或不准确，给用户自身造成任何性质的损失,均由用户自行承担。</view>
				<view class="scroll-item-title">五、本隐私政策的更改</view>
				<view class="scroll-item none">1、如果决定更改隐私政策,我们会在本政策中、本应用网站中以及我们认为适当的位置发布这些更改，以便您了解我们如何收集、使用您的个人信息，哪些人可以访问这些信息，以及在什么情况下我们会透露这些信息。</view>
				<view class="scroll-item none">2、本公司保留随时修改本政策的权利，因此请经常查看。如对本政策作出重大更改，本公司会通过网站通知的形式告知。请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，尤其是本应用用户名及密码发生泄露，请您请您立即联络本应用客服，以便本应用采取相应措施</view>
			</scroll-view>
			<view v-if="isRead" class="bottom" @click="closeDialog">我已阅读隐私保护及免责声明</view>
			<view v-else class="countdown">阅读隐私保护及免责声明倒计时{{time}}秒</view>
		
			<view class="mask" v-show="!isRead"></view>
		</view> -->
		<!-- <view class="mask" v-show="!isRead"></view> -->
	</view>
</template>

<script>
	import singlePicker from "@/myComponents/single-picker.vue"
	import radioButtonGroup from "@/myComponents/radio-button-group.vue"
	import myCheckboxGroup from "@/myComponents/my-checkbox-group.vue"
	import imageUploader from "@/myComponents/image-uploader.vue"
	import cutPicture from "@/myComponents/cut-picture.vue"
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		components: {
			singlePicker,
			radioButtonGroup,
			myCheckboxGroup,
			imageUploader,
			cutPicture
		},
		data() {
			return {
				types: this.$types,
				resident: {
					name: null,
					projId: null,
					personId: null,
					politicalStatus:null,
					company: null,
					roomIds: [],
					carPlate: [],
					carNo: [],
					residentType: null,
					picture: null,
					occupancyType: null,
					occupancyState: null,
					pets: null,
					petType: null,
					petUrl: null
				},
				//表单验证规则
				rules: {
					politicalStatus:{
						rules: [{
							required: true,
							errorMessage: '请选择是否党员',
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					carPlate: {
						rules: [{
							required: true,
							errorMessage: '请输入车牌号',
						}, ]
					},
					carNo: {
						rules: [{
							required: true,
							errorMessage: '请输入车位号',
						}, ]
					},
					personId: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						}, {
							//字符串格式，反斜杠要转义\\  开头结尾/ /省略  new RegExp("\\w+") 相当于  /\w+/
							pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
							errorMessage: '身份证号码格式不正确',
						}]
					},
					projId: {
						rules: [{
							required: true,
							errorMessage: '请选择小区',
						}, ]
					},
					roomIds: {
						rules: [{
							required: true,
							errorMessage: '请选择房屋',
						}, ]
					},
					residentType: {
						rules: [{
							required: true,
							errorMessage: '请选择住户类型',
						}, ]
					},
					occupancyType: {
						rules: [{
							required: true,
							errorMessage: '请选择居住类型',
						}, ]
					},
					occupancyState: {
						rules: [{
							required: true,
							errorMessage: '请选择入住状态',
						}, ]
					},
					pets: {
						rules: [{
							required: true,
							errorMessage: '请选择是否养宠物',
						}, ]
					},
					petType: {
						rules: [{
							validateFunction: (rule, value, data, callback) => {
								if ((value && value.length > 0) || this.resident.pets != 2) {									
									// 通过返回 resolve
									callback()
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									callback('请选择宠物类型')
								}
							}
						}, ]
					},
					petUrl: {
						rules: [{
							validateFunction: (rule, value, data, callback) => {
								if ((value && value.length > 0) || this.resident.pets != 2) {									
									// 通过返回 resolve
									callback()
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									callback('请选择上传宠物照片')
								}
							}
						}, ]
					}
				},
				projectList: [],
				list: [],
				roomList: [],
			
				visible: false,
				isRead: false,
				time: 10,
				candidates: [],

				isDisabled: false,

			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			console.log(options)
			this.projectList = uni.getStorageSync('projList')
			if (!this.projectList) {
				this.getProjectList()
			}
			if (options.projId) {
				this.resident.projId = parseInt(options.projId)
				this.getRoomList(this.resident.projId)
			}

			// this.visible = true
			// setInterval(() => {
			// 	if (this.time === 0) {
			// 		clearInterval()
			// 		this.isRead = true
			// 	}
			// 	this.time--
			// }, 1000)
		},
		onShow() {

		},
		methods: {
			submitForm(form) {
				console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {

					// if (!this.resident.picture) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: "请上传正面照片"
					// 	})
					// 	return
					// }
					console.log('表单数据信息：', res);
					res.petUrl = res.petUrl && res.petUrl[0]
					res.roomIds = [res.roomIds]
					// res.carPlate = res.carPlate.replace('，', ',').split(',')
					// res.carNo = res.carNo.replace('，', ',').split(',')
					res.petType = res.petType && res.petType.map(x => parseInt(x))
					// this.resident.roomIds = [this.resident.roomIds]
					this.register(Object.assign({
						picture: this.resident.picture
					}, res))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			// 获取小区列表
			getProjectList() {
				let p = {
					pagination: {
						current: 1,
						pageSize: 1000
					},
					sorter: {
						field: "id",
						order: 0
					},
					queryType: 36
					// projType: this.$config.projType,
					// guId: this.$config.groupId
				}
				this.$http2.post('/sys/project/list', p).then(res => {
					if (res.code === 10000) {
						this.projectList = res.data.list
						//项目列表设置到storage
						uni.setStorageSync('projList', this.projectList)
					}
				})
			},
			onProjectChange(projId) {
				console.log(projId)
				this.getRoomList(projId)
			},

			// 关闭对话框
			closeDialog() {
				this.visible = false
			},


			// 获取房屋列表
			getRoomList(projId) {
				let p = {
					projId,
					pagination: {
						pageSize: 10000,
						current: 1,
					},
					sorter: {
						field: "partition",
						order: 1
					}
				}
				this.$http2.post('common/housing/room/listNo', p).then(res => {
					console.log(res)
					if (res.code === 10000) {
						res.data.list.forEach(item => {
							if (item.partition !== '') {
								item.label = item.partition + '-' + item.buildingNo + '-' + item.unitNo + '-' + item.roomNo
							} else {
								item.label = item.buildingNo + '-' + item.unitNo + '-' + item.roomNo
							}

							this.candidates.push({
								value: item.id,
								label: item.label
							})
						})
						this.candidates.sort((x, y) => {
							if (x.label > y.label) {
								return 1
							}
							return -1
						})
						this.roomList = res.data.list
						// console.log(this.roomList)
					}
				})
			},
			// 注册
			register(resident) {
				this.isDisabled = true
				uni.showLoading({
					title: '注册中'
				})
				this.$http.post('common/user/register', resident).then(res => {
					uni.hideLoading()
					this.isDisabled = false
					if (res.code === 10000) {

						uni.showModal({
							title: '提示',
							content: '注册成功,信息已提交给后台审核',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '../index/index'
									})
								}
							}
						});
					} else if (res.code === 50012) {
						uni.showToast({
							title: '注册失败,当前房屋户主已存在',
							icon: 'none'
						})
					} else if (res.code === 50008) {
						uni.showToast({
							title: '注册失败,该' + res.msg.slice(0, 3) + '已在当前小区注册',
							icon: 'none'
						})
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
input {
	height: 50rpx;
}
	.photo {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.btn {
		width: 536rpx;
		height: 72rpx;
		background-color: $theme-color;
		// background: rgba(66, 173, 255, 1);
		border-radius: 36px;
		color: #fff;
		line-height: 72rpx;
		margin-top: 80rpx;
		// margin-bottom: 100rpx;
	}

	.dialog {
		width: 100%;
		height: 173%;
		background-color: #4c4c4c;
		// opacity: 0.7;
		position: absolute;
		left: 0;
		top: 0;
	}

	.toast {
		width: 650rpx;
		height: 975rpx;
		// border-radius: 20rpx;
		position: fixed;
		left: 50rpx;
		top: 100rpx;
		color: #333;
		background-color: #fff;
		z-index: 99;

		// ::-webkit-scrollbar{
		// width: 0;
		// height: 0;
		// color: transparent;
		// }
		.scroll {
			text-align: justify;
			padding: 0 0rpx 0 30rpx;
			height: 890rpx;

			// background-color: pink;
			.title {
				display: flex;
				justify-content: center;
				font-size: 34rpx;
				color: #323232;
				font-weight: bold;
				margin-top: 27rpx;
				margin-bottom: 40rpx;
			}

			.scroll-item {
				padding-right: 20rpx;
				text-indent: 2em;
				color: #666;
				font-size: 28rpx;
				line-height: 45rpx;
			}

			.none {
				text-indent: 0;
			}

			.scroll-item-title {
				margin: 12rpx 0;
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.bottom {
			height: 86rpx;
			width: 100%;
			background-color: #4C92FE;
			color: #fff;
			text-align: center;
			line-height: 86rpx;
		}

		.countdown {
			background-color: #fff;
			height: 85rpx;
			width: 100%;
			color: #000;
			text-align: center;
			line-height: 85rpx;
		}

		.mask {
			width: 650rpx;
			height: 88rpx;
			position: relative;
			bottom: 85rpx;
			left: 0;
			// background-color: pink;
			background-color: #4c4c4c;
			opacity: 0.7;
			z-index: 9999;
		}
	}
</style>
